<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.线条属性</title>
    <style>
        body>* {
            margin-left: 40px;
        }li{
             margin-bottom:  0.5em;
         }
        canvas{
            display: inline-block;
            vertical-align: top;
        }
        ol{
            display: block;
        }
    </style>
</head>
<body>
<h4><a href="http://caibaojian.com/canvas/6.html">线条属性</a></h4>
<div>
    <canvas id="canvas">你的浏览器居然不支持Canvas？！赶快换一个吧！！</canvas>
    <canvas id="canvas2">你的浏览器居然不支持Canvas？！赶快换一个吧！！</canvas>
    <canvas id="canvas3"></canvas>
</div>
<ol>
    <li>lineCap 线头设置：butt默认、round半圆、square矩形</li>
    <li>lineJoin 拐角设置：miter默认、round半圆、bevel对角线斜角</li>
</ol>
<p>tip：lineCap、lineJoin后面的绘制会继承，并且只有填充了线条属性才有用
</p>
<!--<h5>实例：</h5>-->
<!--<canvas id="canimg"></canvas>-->
<script>
    window.onload = function () {
        var canvas= document.getElementById('canvas');
        canvas.width=400;
        canvas.height=400;
        canvas.style.background='#ddd';
        var can2d = canvas.getContext('2d');

        can2d.strokeStyle='blue';
        can2d.lineWidth= 10;


        can2d.beginPath();
        can2d.moveTo(30,30);
        can2d.lineTo(200,30);
        can2d.lineCap='butt'; //设置线头，默认平直，没有
        can2d.stroke();

        can2d.beginPath();
        can2d.moveTo(30,60);
        can2d.lineTo(200,60);
        can2d.lineCap='round'; //设置线头，半圆（线宽为直径）
        can2d.stroke();

        can2d.beginPath();
        can2d.moveTo(30,90);
        can2d.lineTo(200,90);
        can2d.lineCap='square'; //设置线头，矩形（线宽为高，线宽一半为宽）
        can2d.stroke();

        //参考线
        can2d.beginPath();
        can2d.moveTo(30,0);
        can2d.lineTo(30,100);
        can2d.moveTo(200,0);
        can2d.lineTo(200,100);
        can2d.strokeStyle='black';
        can2d.lineWidth= 1;
        can2d.stroke();


        //---------------------------------------------------------------------


        var can2= document.getElementById('canvas2');
        can2.width=400;
        can2.height=400;
        can2.style.background='#ddd';
        var can2d2= can2.getContext('2d');

        can2d2.lineWidth=20;
        can2d2.strokeStyle='#f63';

        can2d2.beginPath();
        can2d2.moveTo(40,40);
        can2d2.lineTo(200,40);
        can2d2.lineTo(200,200);
        can2d2.lineCap='round'; //设置线头，半圆（线宽为直径）
        can2d2.lineJoin='miter';//设置拐角，默认
        can2d2.stroke();


        can2d2.beginPath();
        can2d2.moveTo(100,100);
        can2d2.lineTo(300,100);
        can2d2.lineTo(300,300);
        can2d2.lineJoin='round';//设置拐角，圆角
        //会继承lineCap
        can2d2.strokeStyle='#6d3';
        can2d2.stroke();

        can2d2.beginPath();
        can2d2.moveTo(50,200);
        can2d2.lineTo(50,350);
        can2d2.lineTo(150,350);
        can2d2.strokeStyle='#f00';
        //会继承lineCap 重设
        can2d2.lineCap='butt';
        can2d2.lineJoin='bevel'; //设置拐角，对角线
        can2d2.stroke();


    //    ------------------------------------
        var can3= document.getElementById('canvas3');
        can3.width=400;
        can3.height=400;
        can3.style.background='#ddd';
        var can2d3= can3.getContext('2d');
        can2d3.beginPath();
        can2d3.rect(30,30, 100,150);
        can2d3.lineWidth=15;
        can2d3.strokeStyle='red';
        can2d3.lineJoin='round';
        can2d3.fillStyle='green';
        can2d3.fill();
        can2d3.stroke();

    }
</script>
</body>
</html>